<template>
	<view class="mall-list">
		<view v-for="(item,index) in menuData" :key="index" class="mall-list-box" @click="detailRoute(item.pid)">
			<view class="mall-list-box-left">
				<image :src="item.smallImg" mode="widthFix"></image>
			</view>
			<view class="mall-list-box-middle">
				<view class="middle-name">{{item.name}}</view>
				<view class="middle-enname">{{item.enname}}</view>
			</view>
			<view class="mall-list-box-right">
				¥{{item.price}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			menuData:Array
		},
		data() {
			return {
			}
		},
		methods:{
			detailRoute(e){
				uni.navigateTo({
					url:`../detail/Detail?pid=${e}`,
				})
			}
		}
	}
</script>

<style scoped>
	.mall-list-box{
		display: flex;
		align-items: center;
		padding: 30rpx;
	}
	.mall-list-box-left{
		width: 25%;
	}
	.mall-list-box-left>image{
		width: 100%;
	}
	.mall-list-box-middle{
		width: 50%;
		margin-left: 20rpx;
	}
	.mall-list-box-right{
		width: 25%;
		color: #0C34BA;
		font-weight: bold;
	}
	.middle-name{
		color: black;
	}
	.middle-enname{
		margin-top: 10rpx;
		margin-right: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
